<section class="content-header">
  <h1> {{ isClone ? 'Clone' : ( isNew ? 'New' : 'Edit') }} Container</h1>
  <ol class="breadcrumb">
    <li>
      <a [routerLink]="['/cluster', groupInfo.ID, 'overview']"><i class="fa fa-th"></i> Cluster Overview</a>
    </li>
    <li class="active">{{ isClone ? 'Clone' : ( isNew ? 'New' : 'Edit') }} Container</li>
  </ol>
</section>
<section class="content">
  <div class="form-group" *ngIf="isClone">
    <label>Target Group</label>
    <select class="form-control" [ngModel]="selectedGroupId" (ngModelChange)="selectedGroupChange($event)">
      <option value="" disabled>-- Select Group --</option>
      <option value="{{item.ID}}" *ngFor="let item of clusterGroups;">{{ item.Name }}</option>
    </select>
  </div>
  <form novalidate [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="form">
    <div class="sub-panel">
      <p class="text-info title">
        <strong>Basic Info</strong>
      </p>
      <hr>
      <fieldset [attr.disabled]="(isNew || isClone) ? null : 'disabled'">
        <div class="form-group" [class.has-error]="submitted && form.controls.Name.invalid">
          <label>Name</label>
          <input type="text" class="form-control" formControlName="Name" maxlength="30" required pattern="^[0-9a-zA-Z-_.]*$">
          <div *ngIf="submitted && form.controls.Name.invalid">
            <span class="help-block" *ngIf="form.controls.Name.errors.required">Name is required.</span>
            <span class="help-block" *ngIf="form.controls.Name.errors.maxlength">Name cannot more than 30 characters.</span>
            <span class="help-block" *ngIf="form.controls.Name.errors.pattern">Name cannot contain special characters.</span>
          </div>
        </div>

        <div class="form-group" [class.has-error]="submitted && form.controls.Image.invalid">
          <label>Image</label>
          <input type="text" class="form-control" formControlName="Image" maxlength="100" required pattern="^[0-9a-zA-Z\/\:_.-]*$">
          <div *ngIf="submitted && form.controls.Image.invalid">
            <span class="help-block" *ngIf="form.controls.Image.errors.required">Image is required.</span>
            <span class="help-block" *ngIf="form.controls.Image.errors.maxlength">Image cannot more than 100 characters.</span>
            <span class="help-block" *ngIf="form.controls.Image.errors.pattern">Image cannot contain special characters.</span>
          </div>
        </div>

        <div class="form-group" [class.has-error]="submitted && form.controls.Command.invalid">
          <label>Command</label>
          <textarea class="form-control" rows="3" formControlName="Command" maxlength="300"></textarea>
          <div *ngIf="submitted && form.controls.Command.invalid">
            <span class="help-block" *ngIf="form.controls.Command.errors.maxlength">Command cannot more than 300 characters.</span>
          </div>
        </div>

        <div class="equal-fields">
          <div class="form-group" [class.has-error]="submitted && form.controls.NetworkMode.invalid">
            <label>Network Mode</label>
            <select class="form-control" formControlName="NetworkMode">
          <option value="host">Host</option>
          <option value="bridge">Bridge</option>
          <option value="custom">Custom</option>
        </select>
          </div>
          <div class="form-group" *ngIf="form.controls.NetworkMode.value == 'custom'" [class.has-error]="submitted && form.controls.NetworkName.invalid">
            <label>Network Name</label>
            <input type="text" class="form-control" formControlName="NetworkName" maxlength="20" required pattern="^[0-9a-zA-Z_-]*$">
            <div *ngIf="submitted && form.controls.NetworkName.invalid">
              <span class="help-block" *ngIf="form.controls.NetworkName.errors.required">Network name cannot be empty.</span>
              <span class="help-block" *ngIf="form.controls.NetworkName.errors.maxlength">Network cannot more than 20 characters.</span>
              <span class="help-block" *ngIf="form.controls.NetworkName.errors.pattern">Network name must match ^[0-9a-zA-Z]*$..</span>
            </div>
          </div>
          <div class="form-group" *ngIf="form.controls.NetworkMode.value != 'host'" [class.has-error]="submitted && form.controls.HostName.invalid">
            <label>HostName</label>
            <input type="text" class="form-control" formControlName="HostName" maxlength="50" pattern="^[0-9a-zA-Z_-]*$">
            <div *ngIf="submitted && form.controls.HostName.invalid">
              <span class="help-block" *ngIf="form.controls.HostName.errors.maxlength">HostName cannot more than 50 characters.</span>
              <span class="help-block" *ngIf="form.controls.HostName.errors.pattern">HostName must match ^[0-9a-zA-Z]*$..</span>
            </div>
          </div>
        </div>

        <div class="equal-fields">
          <div class="form-group" [class.has-error]="submitted && form.controls.RestartPolicy.invalid">
            <label>Restart Policy</label>
            <select class="form-control" formControlName="RestartPolicy" required>
          <option value="no">No</option>
          <option value="always">Always</option>
          <option value="on-failure">On-Failure</option>
        </select>
            <div *ngIf="submitted && form.controls.RestartPolicy.invalid">
              <span class="help-block" *ngIf="form.controls.RestartPolicy.errors.required">Restart policy is required.</span>
            </div>
          </div>
          <div class="form-group" *ngIf="form.controls.RestartPolicy.value == 'on-failure'" [class.has-error]="submitted && form.controls.RestartRetryCount.invalid">
            <label>Max Retry Count</label>
            <input type="number" class="form-control" formControlName="RestartRetryCount" min="1" max="100" required validateInteger
              validateRange>
            <div *ngIf="submitted && form.controls.RestartRetryCount.invalid">
              <span class="help-block" *ngIf="form.controls.RestartRetryCount.errors.required">Value is required.</span>
              <span class="help-block" *ngIf="form.controls.RestartRetryCount.errors.numberRange">Value must between 1 and 100.</span>
              <span class="help-block" *ngIf="form.controls.RestartRetryCount.errors.integer">Value must be an integer.</span>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>DNS</label>
          <hb-tags-input formControlName="Dns" [validatePattern]="'^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[[1-9][0-9]|[0-9])\\.){3}((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[[1-9][0-9]|[1-9]))$'"></hb-tags-input>
        </div>

        <div class="equal-fields">
          <div class="form-group" [class.has-error]="submitted && form.controls.CPUShares.invalid">
            <label>CPU Shares</label>
            <input type="number" class="form-control" formControlName="CPUShares" placeholder="Unlimited" min="1" max="1024" validateInteger
              validateRange>
            <div *ngIf="submitted && form.controls.CPUShares.invalid">
              <span class="help-block" *ngIf="form.controls.CPUShares.errors.numberRange">CPUShares must between 1 and 1024.</span>
              <span class="help-block" *ngIf="form.controls.CPUShares.errors.integer">CPUShares must be an integer.</span>
            </div>
          </div>
          <div class="form-group" [class.has-error]="submitted && form.controls.Memory.invalid">
            <label>Memory Limit (MB)</label>
            <input type="number" class="form-control" formControlName="Memory" placeholder="Unlimited" min="10" max="102400" validateInteger
              validateRange>
            <div *ngIf="submitted && form.controls.Memory.invalid">
              <span class="help-block" *ngIf="form.controls.Memory.errors.numberRange">Memory must between 10 and 102400.</span>
              <span class="help-block" *ngIf="form.controls.Memory.errors.integer">Memory must be an integer.</span>
            </div>
          </div>
        </div>

        <div class="box" *ngIf="form.controls.NetworkMode.value != 'host'">
          <div class="box-header with-border">Ports Binding</div>
          <div class="box-body" formArrayName="Ports">
            <div class="equal-fields" *ngFor="let port of form.controls.Ports.controls; let i = index;" [formGroupName]="i">
              <div class="form-group" [class.has-error]="submitted && port.controls.PrivatePort.invalid">
                <input type="number" class="form-control" placeholder="Container Port" required min="1" max="65535" formControlName="PrivatePort"
                  validateInteger validateRange>
                <div *ngIf="submitted && port.controls.PrivatePort.invalid">
                  <span class="help-block" *ngIf="port.controls.PrivatePort.errors.required">Private port is required.</span>
                  <span class="help-block" *ngIf="port.controls.PrivatePort.errors.numberRange">Port must be between 1 and 65535.</span>
                  <span class="help-block" *ngIf="port.controls.PrivatePort.errors.integer">Port must be an integer.</span>
                </div>
              </div>
              <div class="form-group">
                <select class="form-control">
                  <option value="tcp">TCP</option>
                  <option value="udp">UDP</option>
                </select>
              </div>
              <div class="form-group" [class.has-error]="submitted && port.controls.PublicPort.invalid">
                <input type="number" class="form-control" placeholder="Host Port (Auto Assign)" min="1" max="65535" formControlName="PublicPort"
                  validateInteger validateRange>
                <div *ngIf="submitted && port.controls.PublicPort.invalid">
                  <span class="help-block" *ngIf="port.controls.PublicPort.errors.numberRange">Port must be between 1 and 65535.</span>
                  <span class="help-block" *ngIf="port.controls.PublicPort.errors.integer">Port must be an integer.</span>
                </div>
              </div>
              <div class="form-group" *ngIf="isNew || isClone">
                <button type="button" class="btn btn-default btn-flat" (click)="removePortBinding(i)">
                  <i class="fa fa-close"></i>
                </button>
              </div>
            </div>
            <div class="form-group no-margin" *ngIf="isNew || isClone">
              <button type="button" class="btn btn-default btn-flat btn-sm" (click)="addPortBinding()">
                <i class="fa fa-plus"></i> Add Port
              </button>
            </div>
            <div class="alert alert-info" *ngIf="!isNew && !isClone && !form.controls.Ports.controls.length">
              No Port Binding.
            </div>
          </div>
        </div>

        <div class="box">
          <div class="box-header with-border">Volumes Binding</div>
          <div class="box-body" formArrayName="Volumes">
            <div class="equal-fields" *ngFor="let volume of form.controls.Volumes.controls; let i = index;" [formGroupName]="i">
              <div class="form-group" [class.has-error]="submitted && volume.controls.ContainerVolume.invalid">
                <input type="text" class="form-control" placeholder="Container volume" required maxlength="200" formControlName="ContainerVolume">
                <div *ngIf="submitted && volume.controls.ContainerVolume.invalid">
                  <span class="help-block" *ngIf="volume.controls.ContainerVolume.errors.required">Container volume port is required.</span>
                  <span class="help-block" *ngIf="volume.controls.ContainerVolume.errors.maxlength">Container volume cannot more than 20 characters.</span>
                </div>
              </div>
              <div class="form-group" [class.has-error]="submitted && volume.controls.HostVolume.invalid">
                <input type="text" class="form-control" placeholder="Host volume" required maxlength="200" formControlName="HostVolume">
                <div *ngIf="submitted && volume.controls.HostVolume.invalid">
                  <span class="help-block" *ngIf="volume.controls.HostVolume.errors.required">Host volume is required.</span>
                  <span class="help-block" *ngIf="volume.controls.HostVolume.errors.maxlength">Host volume cannot more than 20 characters.</span>
                </div>
              </div>
              <div class="form-group" *ngIf="isNew || isClone">
                <button type="button" class="btn btn-default btn-flat" (click)="removeVolumeBinding(i)">
                  <i class="fa fa-close"></i>
                </button>
              </div>
            </div>
            <div class="form-group no-margin" *ngIf="isNew || isClone">
              <button type="button" class="btn btn-default btn-flat btn-sm" (click)="addVolumeBinding()">
                <i class="fa fa-plus"></i> Add Volume
              </button>
            </div>
            <div class="alert alert-info" *ngIf="!isNew && !isClone && !form.controls.Volumes.controls.length">
              No Volume Binding.
            </div>
          </div>
        </div>

        <div class="box">
          <div class="box-header with-border">Environment Variables</div>
          <div class="box-body" formArrayName="Envs">
            <div class="equal-fields" *ngFor="let env of form.controls.Envs.controls; let i = index;" [formGroupName]="i">
              <div class="form-group" [class.has-error]="submitted && env.controls.Value.invalid">
                <input type="text" class="form-control" placeholder="e.g. APP_VERION=1.0.0" required maxlength="500" formControlName="Value">
                <div *ngIf="submitted && env.controls.Value.invalid">
                  <span class="help-block" *ngIf="env.controls.Value.errors.required">Value is required.</span>
                  <span class="help-block" *ngIf="env.controls.Value.errors.maxlength">Value cannot more than 500 characters.</span>
                </div>
              </div>
              <div class="form-group" *ngIf="isNew || isClone">
                <button type="button" class="btn btn-default btn-flat" (click)="removeEnv(i)">
                  <i class="fa fa-close"></i>
                </button>
              </div>
            </div>
            <div class="form-group no-margin" *ngIf="isNew || isClone">
              <button type="button" class="btn btn-default btn-flat btn-sm" (click)="addEnv()">
                <i class="fa fa-plus"></i> Add Environment
              </button>
            </div>
            <div class="alert alert-info" *ngIf="!isNew && !isClone && !form.controls.Envs.controls.length">
              No Environment Setting.
            </div>
          </div>
        </div>

        <div class="box">
          <div class="box-header with-border">Log Config</div>
          <div class="box-body">
            <div style="padding-left: 20px; padding-right: 20px;">
              <div class="box-second-title">Driver</div>
              <div class="form-group" style="margin:0px 15px;" [class.has-error]="submitted && form.controls.LogDriver.invalid">
                <input class="form-control" formControlName="LogDriver" required maxlength="100"/>
                <div *ngIf="submitted && form.controls.LogDriver.invalid">
                  <span class="help-block" *ngIf="form.controls.LogDriver.errors.required">log driver is required.</span>
                  <span class="help-block" *ngIf="form.controls.LogDriver.errors.maxlength">log driver cannot more than 100 characters.</span>
                </div>
              </div>
              <div style="display:inline-block;width:100%;" formArrayName="LogOpts">
                <div class="box-second-title" style="margin-top:10px;">Opts</div>
                <div class="col-md-6" *ngFor="let opt of form.controls.LogOpts.controls; let i = index;" [formGroupName]="i">
                  <div class="equal-fields">
                    <div class="form-group" [class.has-error]="submitted && opt.controls.Value.invalid">
                      <input type="text" class="form-control" placeholder="e.g. option=xxx" required maxlength="100" formControlName="Value">
                      <div *ngIf="submitted && opt.controls.Value.invalid">
                        <span class="help-block" *ngIf="opt.controls.Value.errors.required">opt is required.</span>
                        <span class="help-block" *ngIf="opt.controls.Value.errors.maxlength">opt cannot more than 100 characters.</span>
                      </div>
                    </div>
                    <div class="form-group">
                      <button type="button" class="btn btn-default btn-flat" (click)="removeLogOpt(i)">
                        <i class="fa fa-close"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group no-margin">
                <button style="margin: 0 15px;" type="button" class="btn btn-default btn-flat btn-sm" (click)="addLogOpt()">
                  <i class="fa fa-plus"></i> Add LogOpt
                </button>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </div>

    <div class="sub-panel">
      <p class="text-info title"><strong>Advanced</strong></p>
      <hr>
      <div class="form-group" [class.has-error]="submitted && form.controls.Instances.invalid">
        <label>Number of Instances (Server Num {{groupInfo.Servers.length}})</label>
        <input type="number" #instancesNum class="form-control" formControlName="Instances" required min="1" validateInteger validateRange>
        <div *ngIf="submitted && form.controls.Instances.invalid">
          <span class="help-block" *ngIf="form.controls.Instances.errors.required">Instances cannot be empty.</span>
          <span class="help-block" *ngIf="form.controls.Instances.errors.numberRange">Instances must grather than 1.</span>
          <span class="help-block" *ngIf="form.controls.Instances.errors.integer">Instances must be an integer.</span>
        </div>
        <div class="alert alert-warning" style="margin-top: 5px; display: none;" [class.show]="instancesNum.value > groupInfo.Servers.length">
          Instance num is more than server num. It's can be created but may cause some unpredictable errors.
        </div>
      </div>

      <div class="box">
        <div class="box-header with-border">Webhooks</div>
        <div class="box-body" formArrayName="WebHooks">
          <div class="equal-fields" *ngFor="let webhook of form.controls.WebHooks.controls; let i = index;" [formGroupName]="i">
            <div class="form-group" [class.has-error]="submitted && webhook.controls.Url.invalid">
              <input type="text" class="form-control" placeholder="Url" required maxlength="200" formControlName="Url" pattern="https?://.+">
              <div *ngIf="submitted && webhook.controls.Url.invalid">
                <span class="help-block" *ngIf="webhook.controls.Url.errors.required">Url is required.</span>
                <span class="help-block" *ngIf="webhook.controls.Url.errors.pattern">Invalid URL.</span>
                <span class="help-block" *ngIf="webhook.controls.Url.errors.maxlength">Url cannot more than 200 characters.</span>
              </div>
            </div>
            <div class="form-group" [class.has-error]="submitted && webhook.controls.SecretToken.invalid">
              <input type="text" class="form-control" placeholder="Secret Token(It will be sent in the X-Humpback-Token HTTP header)" maxlength="200"
                formControlName="SecretToken">
              <div *ngIf="submitted && webhook.controls.SecretToken.invalid">
                <span class="help-block" *ngIf="webhook.controls.SecretToken.errors.maxlength">Token cannot more than 200 characters.</span>
              </div>
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-default btn-flat" (click)="removeWebhook(i)">
                <i class="fa fa-close"></i>
              </button>
            </div>
          </div>
          <div class="form-group no-margin">
            <button type="button" class="btn btn-default btn-flat btn-sm" (click)="addWebhook()">
              <i class="fa fa-plus"></i> Add Hook
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group">
      <button type="submit" class="btn bg-olive btn-flat">
        <i class="fa fa-save"></i> Save
      </button>
      <a [routerLink]="['/cluster', groupInfo.ID, 'overview']" class="btn btn-flat btn-danger">Cancel</a>
    </div>
  </form>
</section>
